<template>
  <div>
    <el-collapse-transition>
      <div v-if="!isShowDetail" class="app-main-content-box">
        <!--顶部-->
        <div class="top">
          <div class="app-main-top-box">
            <el-button
              type="primary"
              @click="handleAddTask"
            >新增任务</el-button>
          </div>
        </div>
        <div class="content">
          <table-panel
            :table-head="tableHead"
            :table-data="tableData"
            height="60vh"
          >
            <template #coupon="{ scope }">
              <div
                v-if="scope && scope.firstCouponPrototype"
                class="app-text-color-primary"
                @click="handleClickTableColumn(scope.firstCouponPrototype)"
              >
                {{ scope.firstCouponPrototype.couponName }}（面额：{{
                  scope.firstCouponPrototype.reduceCost
                }}元）
              </div>
              <div>批次号：{{ scope.firstCouponPrototypeId }}</div>
            </template>
            <template #dayCouponPrototype="{ scope }">
              <div
                v-if="scope && scope.dayCouponPrototype"
                class="app-text-color-primary"
                @click="handleClickTableColumn(scope.dayCouponPrototype)"
              >
                {{ scope.dayCouponPrototype.couponName }}（面额：{{
                  scope.dayCouponPrototype.reduceCost
                }}元）
              </div>
              <div>批次号：{{ scope.dayCouponPrototypeId }}</div>
            </template>
            <template slot="footer">
              <!--分页器-->
              <pagination-direction
                :config="paginationConfig"
                @sizeschange="sizesChange"
                @pagechange="pageChange"
              />
            </template>
          </table-panel>
        </div>
      </div>
    </el-collapse-transition>
    <dialog-add-coupon-task
      :show.sync="showDialogAddCouponTask"
      @success="fetchData"
    />
    <el-collapse-transition><CouponInfo
      v-if="isShowDetail"
      ref="couponInfo"
    /></el-collapse-transition>
  </div>
</template>

<script>
import TablePanel from '@/components/TablePanel'
import DialogAddCouponTask from './components/DialogAddCouponTask'
import CouponInfo from './components/CouponInfo'
import { giftConfigSelectList } from '@/api/marketing'
export default {
  components: { TablePanel, DialogAddCouponTask, CouponInfo },
  data() {
    return {
      tableHead: [
        {
          label: '押金金额(元)',
          prop: 'depAmt'
        },
        {
          label: '首赠券',
          prop: 'coupon',
          type: 'custom'
        },
        {
          label: '每日赠券',
          prop: 'dayCouponPrototype',
          type: 'custom'
        },
        {
          label: '更新时间',
          prop: 'updateTime'
        }
      ],
      tableData: [],
      /* 分页 */
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [5, 10, 20, 50, 100], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      showDialogAddCouponTask: false,
      isShowDetail: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const {
        data: { list, total }
      } = await giftConfigSelectList({
        page: this.paginationConfig.page, // 页数-默认1
        pageSize: this.paginationConfig.pageSize // 每页条数-默认10
      })
      list.map((v) => {
        if (v.firstCouponPrototype) {
          v.firstCouponPrototype.reduceCost = (
            v.firstCouponPrototype.reduceCost / 100
          ).toFixed(2)
        }
        if (v.dayCouponPrototype) {
          v.dayCouponPrototype.reduceCost = (
            v.dayCouponPrototype.reduceCost / 100
          ).toFixed(2)
        }
        v.depAmt = (v.depAmt / 100).toFixed(2)
      })
      this.tableData = list
      this.paginationConfig.total = total
    },
    handleAddTask() {
      this.showDialogAddCouponTask = true
    },
    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },
    // 分页page改变
    pageChange() {
      this.fetchData()
    },
    handleAddSuccess() {
      this.paginationConfig.page = 1
      this.$nextTick(() => {
        this.fetchData()
      })
    },
    handleClickTableColumn(row) {
      this.isShowDetail = true
      this.$nextTick(() => {
        this.$refs.couponInfo.open(row).then((res) => {
          this.isShowDetail = false
          this.fetchData()
        })
      })
    }
  }
}
</script>

<style scoped></style>
